@material/line-ripple
Advanced tools
@material/line-ripple is a package from the Material Components for the Web (MDC Web) library. It provides a line ripple component, which is typically used as an underline for text fields and other input elements. The line ripple is a visual effect that animates when the input element gains or loses focus, enhancing the user experience by providing a clear visual cue.
Initialize Line Ripple
This code initializes the line ripple component on an element with the class 'mdc-line-ripple'. The MDCLineRipple class is part of the @material/line-ripple package and is used to create and manage the line ripple effect.
const lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));Activate Line Ripple
This code activates the line ripple effect, typically used when an input element gains focus. The activate method triggers the animation that makes the line ripple visible.
lineRipple.activate();Deactivate Line Ripple
This code deactivates the line ripple effect, typically used when an input element loses focus. The deactivate method triggers the animation that hides the line ripple.
lineRipple.deactivate();Set Ripple Center
This code sets the center of the ripple effect to a specific coordinate. The setRippleCenter method is useful for customizing the appearance of the ripple effect based on user interactions.
lineRipple.setRippleCenter(50);Material-UI is a popular React component library that implements Google's Material Design. It provides a wide range of components, including input fields with underline effects similar to the line ripple in @material/line-ripple. Material-UI is more comprehensive and offers a broader set of components and utilities for building Material Design applications.
react-md is another React component library that follows Material Design guidelines. It includes components for text fields with underline effects, similar to the line ripple provided by @material/line-ripple. react-md focuses on providing a complete set of Material Design components for React applications.
Vuetify is a Material Design component framework for Vue.js. It offers a wide range of components, including input fields with underline effects similar to the line ripple in @material/line-ripple. Vuetify is designed to be a comprehensive solution for building Material Design applications with Vue.js.
The line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.
npm install @material/line-ripple
<span class="mdc-line-ripple"></span>
@use "@material/line-ripple/mdc-line-ripple";
import {MDCLineRipple} from '@material/line-ripple';
const lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));
| CSS Class | Description |
|---|---|
mdc-line-ripple | Mandatory. |
mdc-line-ripple--active | Styles the line ripple as an active line ripple. |
mdc-line-ripple--deactivating | Styles the line ripple as a deactivating line ripple. |
| Mixin | Description |
|---|---|
color($color) | Customizes the color of the line ripple when active. |
MDCLineRipple Properties and Methods| Method Signature | Description |
|---|---|
activate() => void | Proxies to the foundation's activate() method. |
deactivate() => void | Proxies to the foundation's deactivate() method. |
setRippleCenter(xCoordinate: number) => void | Proxies to the foundation's setRippleCenter(xCoordinate: number) method. |
If you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.
MDCLineRippleAdapter| Method Signature | Description |
|---|---|
addClass(className: string) => void | Adds a class to the root element. |
removeClass(className: string) => void | Removes a class from the root element. |
hasClass(className: string) => boolean | Determines whether the root element has the given CSS class name. |
setStyle(propertyName: string, value: string) => void | Sets the style property with propertyName to value on the root element. |
registerEventHandler(evtType: EventType, handler: EventListener) => void | Registers an event listener on the root element for a given event. |
deregisterEventHandler(evtType: EventType, handler: EventListener) => void | Deregisters an event listener on the root element for a given event. |
MDCLineRippleFoundation| Method Signature | Description |
|---|---|
activate() => void | Activates the line ripple. |
deactivate() => void | Deactivates the line ripple. |
setRippleCenter(xCoordinate: number) => void | Sets the center of the ripple to the xCoordinate given. |
handleTransitionEnd(evt: Event) => void | Handles a transitionend event. |
6.0.0 (2020-04-22)
[@use](https://github.com/use) (098ae32)indeterminate checkbox (b273afa)select: HTML Markup significantly changed, see README; REMOVED adapter methods isSelectedTextFocused, getSelectedTextAttr, setSelectedTextAttr; ADDED adapter methods isSelectAnchorFocused, getSelectAnchorAttr, setSelectAnchorAttr; removed variables outlined-dense-label-position-y, icon-padding; added variables minimum-height-for-filled-label, filled-baseline-top, selected-text-height, anchor-padding-left, anchor-padding-left-with-leading-icon, anchor-padding-right.
text-field: Redundant mixins mdc-text-field-textarea-fill-color, mdc-text-field-textarea-stroke-color, mdc-text-field-fullwidth-bottom-line-color removed. Instead, use mdc-text-field-fill-color, mdc-text-field-outline-color, and mdc-text-field-bottom-line-color respectively to achieve the same effect.
textfield: mdc-text-field--dense and associated mixins/variables have been removed. Use the density() mixin instead.
textfield: removed the following variables: $input-padding, $input-padding-top, $input-padding-bottom, $outlined-input-padding-top, $outlined-input-padding-bottom, $input-border-bottom
linear-progress: DOM for linear progress buffer changed. MDCLinearProgressAdapter method getBuffer, getPrimaryBar, setStyle removed. MDCLinearProgressAdapter method setBufferBarStyle, setPrimaryBarStyle added.
linear-progress: DOM for linear progress buffer changed. MDCLinearProgressAdapter method getBuffer, getPrimaryBar, setStyle removed. MDCLinearProgressAdapter method setBufferBarStyle, setPrimaryBarStyle added.
typography: typography.baseline-top() and typography.baseline-bottom() are now private. Use typography.baseline() for containers and typography.text-baseline() for text with $top and $bottom params.
chips: The touch target and text now appear inside the primary action element. Please see the readme for markup changes.
textfield: filled text fields must include a <div class="mdc-text-field__ripple"></div>
textfield: Filled textfields will no longer show a floating label at certain densities. This can be overridden by setting $mdc-text-field-minimum-height-for-filled-label: 40px
chips: Both MDCChipAdapter and MDCChipSetAdapter have new methods. MDCChipSetFoundation event handlers now accept the corresponding chip event detail interface as the sole argument. The root property has been removed from the MDCChipRemovalEventDetail interface.
line-ripple: mdc-line-ripple-color() mixin has been renamed to mdc-line-ripple-active-color()
textfield: Default textfields must now specify mdc-text-field--filled. Disabled outlined textfields no longer have a shaded background. Height mixin no longer specifies a baseline override, use typography's baseline-top mixin.
Four variables and a mixin in mdc-textfield were renamed to use a mdc-text-field- prefix when depended on via @import (formerly mdc-required-text-field-label-asterisk_, now required-label-asterisk_).
textfield: icons must use .mdc-text-field__icon--leading or .mdc-text-field__icon--trailing classes. mdc-text-field-icon-color() mixin has been split into mdc-text-field-leading-icon-color() and mdc-text-field-trailing-icon-color().
switch: Added setNativeControlAttr method in mdc-switch adapter.
checkbox: remove event listener for 'change' and add event listener for 'click'.
$mdc-button-disabled-container-fill-color
renamed to $mdc-button-disabled-container-color.$edgeOptOut option from mdc-theme-prop() Sass mixin.FAQs
The Material Components for the web line-ripple component
The npm package @material/line-ripple receives a total of 782,243 weekly downloads. As such, @material/line-ripple popularity was classified as popular.
We found that @material/line-ripple demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.
Security News
Sonar’s acquisition of Tidelift highlights a growing industry shift toward sustainable open source funding, addressing maintainer burnout and critical software dependencies.
Security News
Ransomware negotiators share how modern cybercriminals operate like corporations, using specialized teams, negotiation tactics, and reputation management.